<template>
  <div class="app-container">
    <el-form ref="form" :model="model" :rules="rules" :inline="false" class="" label-width="120px">
      <el-form-item label="单行文本" prop="status">
        <el-input v-model="model.status" clearable/>
      </el-form-item>
      <el-form-item label="多行文本" prop="description">
        <el-input v-model="model.description" type="textarea" maxlength="40" placeholder="description" show-word-limit/>
      </el-form-item>
      <el-form-item label="复合型输入框" prop="status">
        <el-input v-model="model.status" placeholder="请输入内容">
          <template slot="append">.com</template>
        </el-input>
      </el-form-item>
      <el-form-item label="复合型输入框" prop="status">
        <el-input v-model="model.status" placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="TimePicker">
        <el-time-picker v-model="model.datetime" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" placeholder="任意时间点">
        </el-time-picker>
      </el-form-item>
      <el-form-item label="DatePicker">
        <el-date-picker
          v-model="model.datetime"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="DatePicker 范围">
        <el-date-picker
          v-model="model.datetime"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerRangeOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="日期时间">
        <el-date-picker v-model="model.datetime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择日期时间" clearable />
        <el-button icon="el-icon-document-copy" />
      </el-form-item>
      <el-form-item label="多选" prop="">
        <el-checkbox-group v-model="model.checkbox_type">
          <el-checkbox :label="1">多选一</el-checkbox>
          <el-checkbox :label="2">多选二</el-checkbox>
          <el-checkbox :label="3">多选三</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="单选" prop="encoding_aes_type">
        <el-radio-group v-model="model.radio_type">
          <el-radio v-for="(item, index) in radio_types" :key="index" :label="item.value | stringToNumber">{{ item.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="计数器" prop="num">
        <el-input-number v-model="model.num" :min="1" :max="10" step-strictly label="描述文字"/>
      </el-form-item>
      <el-form-item label="精度" prop="amount">
        <el-input-number v-model="model.amount" :precision="2" :step="0.01" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item label="计数器2" prop="num">
        <el-input-number v-model="model.num" controls-position="right" :min="1" :max="10"></el-input-number>
      </el-form-item>
      <el-form-item label="select 单选" prop="">
        <el-select v-model="value0" placeholder="请选择">
          <el-option
            v-for="opt0 in options0"
            :key="opt0.value"
            :label="opt0.label"
            :value="opt0.value"
            :disabled="opt0.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="select 单选" prop="">
        <el-select v-model="value0" placeholder="请选择" filterable>
          <el-option v-for="opt0 in options0" :key="opt0.value" :label="opt0.label" :value="opt0.value" :disabled="opt0.disabled">
            <span style="float: left">{{ opt0.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ opt0.value }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="select 多选" prop="">
        <el-select v-model="value" placeholder="请选择" multiple>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="select 多选" prop="">
        <el-select v-model="value" placeholder="请选择" multiple collapse-tags>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="select 多选 监控" prop="">
        <el-tag v-for="item of value" :key="item" style="margin-right:15px;">
          {{ item }}
        </el-tag>
      </el-form-item>
      <el-form-item label="switch" prop="">
        <el-switch v-model="model.switch" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </el-form-item>
      <el-form-item label="switch" prop="">
        <el-switch v-model="model.switch" active-text="启用" inactive-text="禁用"></el-switch>
      </el-form-item>
      <el-form-item label="color" prop="">
        <el-color-picker v-model="model.color" show-alpha :predefine="predefineColors">
        </el-color-picker>
      </el-form-item>

      <el-form-item label="文件上传" prop="files">
        <el-upload :multiple="true" :action="uploadAction" drag>
          <i class="el-icon-upload" />
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="文件缩略图" prop="files">
        <el-upload
          :action="uploadAction"
          list-type="picture-card"
          :on-preview="handleImgPreview"
          :on-remove="handleImgRemove">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="handleImgPreview(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span v-if="!imageDisabled" class="el-upload-list__item-delete" @click="handleImgDownload(file)">
                <i class="el-icon-download"></i>
              </span>
              <span v-if="!imageDisabled" class="el-upload-list__item-delete" @click="handleImgRemove(file)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="图片列表缩略图" prop="files">
        <el-upload
          class="upload-demo"
          :action="uploadAction"
          :on-preview="handleImgPreview"
          :on-remove="handleImgRemove"
          :file-list="fileList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="图片" prop="imgs">
        <el-row :gutter="0">
          <el-col :span="8">
            <el-button size="mini" @click="fileUpload()">上传图片</el-button>
          </el-col>
          <el-col :span="16">
            <div>每张图片大小不超过 500 KB，jpg、png格式。</div>
          </el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col v-for="(item, index) in model.imgs" :key="index" :span="6" style="border:1px solid #DCDFE6">
            <el-image style="width:100%;height:100px;" :src="item.full_file_url" :preview-src-list="[item.full_file_url]" fit="contain">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"/>
              </div>
            </el-image>
            <br style="line-height: 0">
            <el-link :href="item.full_file_url" :underline="false" :download="item.full_file_url" target="_blank" style="margin:0 1px">
              下载<span style="font-size:10px">({{ item.file_size }})</span>
            </el-link>
            <el-button size="mini" @click="uploadDele(index)">删除</el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="二维码内容" prop="str">
        <el-input v-model="qrcodeModel.str" placeholder="请输入文本内容" clearable />
      </el-form-item>
      <el-form-item id="qrcode" label="二维码" prop="value" style="margin-bottom: 0;">
        <qrcode-vue v-if="qrcodeModel.value" v-model="qrcodeModel.value" :size="qrcodeModel.size" />
        <div v-else style="width:210px;height:210px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createQrcode()">生成二维码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="margin-left: 120px">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button type="primary" @click="dialogDragVisible = true">
        open a Drag Dialog
      </el-button>
    </div>

    <el-dialog :visible.sync="dialogImageVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <el-dialog v-el-drag-dialog :visible.sync="dialogDragVisible" @dragDialog="handleDrag">
      <span>可拖拽</span>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogDragVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogDragVisible = false">确 定</el-button>
    </span>
    </el-dialog>

    <el-dialog title="上传文件" :visible.sync="fileDialog" width="80%" top="10vh">
      <file-manage file-type="image" @fileCancelCallback="fileCancel" @fileSubmitCallback="fileSubmit" />
    </el-dialog>
  </div>
</template>

<script>
import QrcodeVue from 'qrcode.vue' // Qrcode
import screenHeight from '@/utils/screen-height'
import elDragDialog from '@/directive/el-drag-dialog'
import FileManage from '../iframe/components/File'
import {uploadURL} from '@/api/admin/common'

export default {
  name: 'AdminUser',
  components: {FileManage, QrcodeVue},
  directives: {elDragDialog},
  data() {
    return {
      height: 680,
      loading: false,
      model: {
        id: '',
        created_at: '',
        updated_at: '',
        name: '',
        remark: '',
        status: '',
        sorting: 100,

        num: 1,
        amount: 1.03,
        checkbox_type: [1],
        radio_type: 1,
        switch: true,
        color: 'rgba(255, 69, 0, 0.68)',

        imgs: [],
        files: []
      },
      rules: {},
      fileDialog: false,

      uploadAction: uploadURL(),
      dialogImageVisible: false,
      dialogImageUrl: '',
      imageUrl: '',
      imageDisabled: false,
      fileList: [],

      dialogDragVisible: false,

      qrcodeModel: {
        str: '',
        url: '',
        value: '',
        size: 200
      },

      radio_types: [
        {value: 1, label: '单选一'},
        {value: 2, label: '单选二'},
        {value: 3, label: '单选三'}
      ],
      value0: 'opt3',
      options0: [
        {
          value: 'opt1',
          label: '选项一'
        },
        {
          value: '禁止选项',
          label: 'forbid',
          disabled: true
        },
        {
          value: 'opt3',
          label: '选项三'
        }
      ],
      value: ['Apple', 'Banana', 'Orange'],
      options: [
        {
          value: 'Apple',
          label: 'Apple Lab'
        },
        {
          value: 'Banana',
          label: 'Banana Lab'
        },
        {
          value: 'Orange',
          label: 'Orange Lab'
        },
        {
          value: 'Pear',
          label: 'Pear Lab'
        },
        {
          value: 'Strawberry',
          label: 'Strawberry Lab'
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      pickerRangeOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],

      dialogTableVisible: false
    }
  },
  created() {
    this.height = screenHeight()
  },
  methods: {
    // 提交
    submit() {
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: `
            <div>Role Key: ${this.name}</div>
            <div>Role Name: ${this.name}</div>
            <div>Description: ${this.name}</div>
          `,
        type: 'success'
      })

      this.$refs['form'].validate(valid => {
        if (valid) {

        }
      })
    },

    // 上传文件
    fileUpload() {
      this.fileDialog = true
    },
    fileCancel() {
      this.fileDialog = false
    },
    fileSubmit(fileList) {
      this.fileDialog = false
      const file_len = fileList.length
      if (fileList) {
        for (let i = 0; i < file_len; i++) {
          this.model.imgs.push(fileList[i])
        }
      }
    },
    uploadDele(index) {
      this.model.imgs.splice(index, 1)
    },

    handleImgPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImageVisible = true;
    },
    handleImgRemove(file, fileList) {
      console.log(file, fileList);
    },
    handleImgDownload(file) {
      console.log(file);
    },

    // 生成二维码
    createQrcode() {
      if (this.qrcodeModel.str) {
        this.qrcodeModel.value = this.qrcodeModel.str
      } else {
        this.qrcodeModel.str = '测试 qrcode'
        this.qrcodeModel.value = this.qrcodeModel.str
      }
    },

    handleDrag() {
      console.log('handleDrag')
    }
  }
}
</script>

<style scoped>

</style>
